<template>
    <div class="modal-container" >
        <div class="modal-content">
            <div class="rounded-rectangle">
                <div class="leftrounded" >
                    <img :src="img1" alt="image" class="carousel-image" />
                </div>
                <div class="rightrounded">
                    <div style="margin:100px 0 0 40px;">
                        <div class = "title">
                            <img
                                :class="'avatar'"
                                :src="icon"
                                style="object-fit: cover;width:65px;height:65px;margin-top:10px;"
                            />
                            <el-row style="margin-left:10px;">
                                <span style="font-size:40px;">爱宠+</span>
                                <span> 让千万爱宠人更幸福</span>
                            </el-row>
                        </div>
                        <form @submit.prevent="handleSubmit">
                            <div class="Logininput">
                                <div class="form-group">
                                    <div class="input-wrapper">
                                        <el-input
                                            type="email"
                                            id="email"
                                            v-model="email"
                                            placeholder="请输入您的邮箱"
                                            style="height: 40px; font-size: 16px;"
                                            required>
                                            <template #prefix>
                                                <el-icon style="font-size: 24px;"><Message /></el-icon>
                                            </template>
                                        </el-input>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-wrapper">
                                        <el-input type="password"
                                                  id = "password"
                                                  v-model="password"
                                                  placeholder="请输入您的密码"
                                                  style="height: 40px; font-size: 16px;"
                                                  show-password>
                                            <template #prefix>
                                                <el-icon style="font-size: 24px;"><Lock /></el-icon>
                                            </template>
                                        </el-input>
                                    </div>
                                </div>
                                <div style="display: flex; align-items: center; margin-top:-5px; margin-left: 35px; margin-bottom: 10px;">
                                    <p style="color: gray;">还未注册？</p>
                                    <span class="reply-btn" @click="apply" >点击此处注册新账号</span>
                                </div>
                                <button type="submit" class="submit-button">登录</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {ref} from 'vue';
import img1 from './resource/img.png';
import icon from '/src/assets/icon.png'
import axios from 'axios';
import { useRouter } from 'vue-router';
import {ElMessage} from "element-plus";


const email = ref('');
const password = ref('');
const router = useRouter();
const userID = ref('');
const handleSubmit = async () => {
    try {
        const response = await axios.post('http://localhost:8080/auth/login', {
            email: email.value,
            password: password.value,
        });
        const result = response.data; // 使用 axios 获取响应数据
        console.log(result);
        if (response.status === 200) {
            if (result.result === 1) {
                userID.value = result.id;
                const tokenData = { token: result.token , userID : userID.value};
                sessionStorage.setItem('token', JSON.stringify(tokenData));
                await router.push({name: 'MainPage' }); // 跳转到主页面
            } else {
              ElMessage({
                message: '用户名或密码错误',
                type: 'error',
                style: 'font-size:25px;font-weight:bold;',
                offset: 50,
                grouping:true
              })
            }
        } else {
          ElMessage({
            message: '用户名或密码错误',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            offset: 50,
            grouping:true
          })
        }
    } catch (error) {
      ElMessage({
        message: '网络错误，请稍后再试',
        type: 'error',
        style: 'font-size:25px;font-weight:bold;',
        offset: 50,
        grouping:true
      })
    }
};
const apply = () => {
    router.push({ name : 'Register'}); // 跳转到注册页面
};

</script>

<style scoped>
.modal-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh; /* 视口高度 */
    width: 90vw; /* 视口宽度 */
    margin : auto;
}
.modal-container > * {
    /* 确保子元素不会破坏父元素的布局 */
    margin: 0;
    padding: 0;
    flex-shrink: 0; /* 防止子元素缩小 */
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    width: 75%;
    height: 75%;
    overflow: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.rounded-rectangle {
    border-radius: 20px; /* 圆弧长方形 */
    text-align: center;
    width: 98%; /* 设置宽度为页面的98% */
    height: 98%; /* 设置高度为页面的98% */
    margin: auto; /* 自动居中 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 左右两部分之间留有空间 */
}

.leftrounded,.rightrounded {
    height: 100%;
}

.leftrounded {
    padding: 10px; /* 添加内边距 */
    flex: 1.2; /* 修改为占比1.2 */
}

.rightrounded {
    border-radius: 20px; /* 圆弧长方形 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px; /* 添加内边距 */
    flex: 0.8; /* 修改为占比0.8 */
}

.carousel-image {
    width: 98%;
    height: 98%;
    object-fit: cover; /* 保持图片比例并填充容器 */
}
.title{
    display: flex;
    align-items: center;
    margin-top: -220px;
    margin-bottom: 30px;
    width: 100%;
    max-width: 300px;
}
.welcome{
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 300px;
    margin-left: -70px;
}
.welcome-message{
    margin-left: -20px;
}

.welcome-message h2 {
    font-size: 2rem;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    width: 100%;
    max-width: 300px;
}

label {
    margin-right: 10px;
    color: #333;
}

input {
    flex: 1;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 50%;
    padding: 10px;
    background-color:#FFD466;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color:  #FFB74D;
}

.Logininput {
  display: flex;
  justify-content: center;
  flex-direction: column;
    margin-top: 20px;
    margin-bottom: -200px;
    width: 100%;
    max-width: 300px;
}

.login-result {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    box-sizing: border-box;
    z-index: 1; /* 确保登录结果覆盖层在图片轮播层之上 */
}

.submit-button{
  margin-left: 80px;
  margin-top: 10px;
  font-family: "等线", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 10px; /* 设置字符间的间距，这里设置为2px，可根据需要调整 */
}
.reply-btn {
    color: gray;
    text-decoration: underline; /* 添加下划线 */
    cursor: pointer;
    margin-left: 5px; /* 调整间距 */
}
.reply-btn:hover {
    color: darkgray; /* 鼠标悬停时颜色加深 */
}
.input-wrapper {
    position: relative;
    display: inline-block;
    width: 300px;
    max-width: 400px; /* 可根据实际需求调整最大宽度 */
}
</style>
